<template>
    <div>
        <van-row class="mb-10" v-if="item3.Value">
            <van-col v-if="item3.Display" style="color: #9e9e9e;" offset="1" span="9">{{ item3.Display }}</van-col>
            <van-col offset="1" span="13">
                <div v-if="!item3.ValueType && item3.ParamList && item3.ParamList.length > 0">
                    <span v-if="item3.Type == 'Grid'" style="color: #1989fa;" @click="toTable(item3)">表格已填写</span>
                    <span v-else v-for="(v, i) in item3.ParamList" :key="i">
                        <span v-if="item3.Value && item3.Value.indexOf(v.ID) !== -1">
                            <span>{{ v.Name }};</span>
                        </span>
                    </span>
                </div>
                <div v-else-if="!item3.ValueType && item3.ParamList && item3.ParamList.length < 1">
                    <div v-if="item3.Type == 'SingleImage' || item3.Type == 'MultiImage'">
                        <!-- <van-image v-for="item4 in item3.value.split(';')" :src="baseUrl+item4"/> -->
                        <img v-for="(item2, index2) in item3.Value.split(';')" :key="index2"
                            style="width: 50px; height: 50px;margin-left: 5px;" :src="baseUrl + item2" alt=""
                            @click="showImg(baseUrl + item2)" />
                    </div>

                    <span v-else>{{ item3.Value }}{{ item3.Unit || '' }}
                        <span v-if="item3.RelatedDisplay">,{{ item3.RelatedDisplay }}:{{ item3.AnotherValue }}{{
            item3.RelatedFieldUnit }}</span>
                    </span>
                </div>
                <div v-if="item3.ValueType == 'Json'" class="perilous">
                    <span v-for="(v, i) in item3.ParamList" :key="i">
                        <span v-for="(v1, i1) in item3.Value" :key="i1">
                            <div v-if="v.ID == v1.Key">{{ v.Name }}
                                <span v-if="item3.FirstFieldName">,{{ item3.FirstFieldName }}:
                                </span>{{ v1.FirstField }}{{ item3.FirstFieldUnit }}
                                <span v-if="item3.SecondFieldName">，{{ item3.SecondFieldName }}：{{ v1.SecondField }}{{
            item3.SecondFieldUnit }}</span>
                                <span v-if="item3.ThirdFieldName">，{{ item3.ThirdFieldName
                                    }}：{{ v1.ThirdField }}</span>
                            </div>
                            <div v-if="v.ID == v1.Key && item3.FieldName == 'LiquefiedGas_CylinderCnt'">
                                {{ v.Name }} {{ v1.FirstField || '' }}{{item3.FirstFieldUnit || '' }}
                            </div>
                        </span>
                    </span>
                </div>
            </van-col>
        </van-row>
    </div>
</template>

<script>
import { ImagePreview } from "vant";
import { mapGetters } from 'vuex'
export default {
    props: {
        item3: {

        }
    },
    computed: {
		...mapGetters(['baseUrl', 'CompanyCode']),
	},
    methods: {
        showImg(imagePath) {
            let paths = [imagePath]
            ImagePreview({
                images: paths,
                startPosition: 0,
            });
        },
        toTable(item) {

            this.$router.push({
                path: 'BaseInfo/Table', query: {
                    value: item.Value,
                    params: item.ParamList
                }
            })
        },
    }
}
</script>

<style lang="less" scoped>
.perilous {
    font-size: 14px;
    line-height: 1.3;
}
</style>